<template>
<div>


   <div class="user-table">
 
                <div class="price  mt10 bg-white">
                    <dl>
                      <dt>
                        <div id="register" style="height:150px;width:350px;"></div>
                      </dt>
                    </dl>
                     <dl>
                      <dt><el-progress type="circle" :percentage="percentage" :width="75"></el-progress></dt>
                      <dd class="mt10">留存率</dd>
                    </dl>
                   
                </div>
      
                <div class="price  mt10 bg-white">
                    <dl>
                      <dt>
                       <i :class="[before.userTotalCount-current.userTotalCount>0?'el-icon-sort-up':'el-icon-sort-down']"></i> 
                        
                        {{before.userTotalCount-current.userTotalCount}}</dt>
                      <dd>整体环比</dd>
                    </dl>
                     <dl>
                      <dt>
                         <i :class="[before.userCount_PC-current.userCount_PC>0?'el-icon-sort-up':'el-icon-sort-down']"></i> 
                       
                        {{before.userCount_PC-current.userCount_PC}}
                      </dt>
                      <dd>PC环比</dd>
                    </dl>
                     <dl>
                     <dt>
                       <i :class="[before.userCount_ANDROID-current.userCount_ANDROID>0?'el-icon-sort-up':'el-icon-sort-down']"></i> 
                        {{before.userCount_ANDROID-current.userCount_ANDROID}}
                     </dt>
                      <dd>安卓环比</dd>
                    </dl>
                     <dl>
                     <dt>
                       <i :class="[before.userCount_IOS-current.userCount_IOS>0?'el-icon-sort-up':'el-icon-sort-down']"></i> 
                       {{before.userCount_IOS-current.userCount_IOS}}
                     </dt>
                      <dd>IOS环比</dd>
                    </dl>
                </div>

                 <div class="price  mt10 bg-white">
                    <dl>
                      <dt>{{before.activeUserCount}}</dt>
                     
                    </dl>
                     <dl>
                      <dd class="tl">
                        <p> 新用户充值数</p>
                        <p class="mt10 ">{{current.newUserRechargeCount}}</p>
                      </dd>
                      <dd class="tl mt20">
                        <p> 新用户充值率</p>
                        <p class="mt10 ">{{current.newUserRechargeRate}}</p>
                      </dd>
                    </dl>
                    
                    
                </div>
          
    </div>
    </div>
</template>

<script>
var echarts = require("echarts");
import service from "@/service/index_c";
export default {
  data() {
    return {
     
      current: {},
      before: {},
      times: "",
      percentage:0
    };
  },
  mounted() {
    this.queryChartNewInfoData();
  },
  methods: {
    async queryChartNewInfoData(day = 30) {
      let res = await service.haiheiServerDataUserNewInfo({
        proxyDay_biQuery: day
      });
      this.times = res.time;
      if (res.success) {
        this.before = res.result.before;
        this.current = res.result.current;
        this.percentage=(this.current.lcRate.replace('%','')-0);
        this.queryChartPie();
      }
    },
    queryChartPie() {
      let worldMapContainer = document.getElementById("register");
      var myChart = echarts.init(worldMapContainer);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: 200,
          y: 30,
          data: ["用户增长", "IOS增长", "安卓增长", "PC增长"]
        },

        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            // color:['#B0DC00','#8352BE','#F09252'],
            color: ["#409EFF", "#f39b4d", "#8352BE", "#B0DC00"],
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  // fontSize: "30",
                  // fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: this.current.userTotalCount, name: "用户增长" },
              { value: this.current.userCount_IOS, name: "IOS增长" },
              { value: this.current.userCount_ANDROID, name: "安卓增长" },
              { value: this.current.userCount_PC, name: "PC增长" },
            
            ]
          }
        ]
      };
      myChart.setOption(option, true);
    }
  }
};
</script>

<style scoped>
.user-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.price {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 33%;
  height: 150px;
}
dl {
  text-align: center;
}
dl dt {
  font-size: 30px;
  color: #00aeff;
}
dl dd {
  margin-top: 10px;
  color: #6d727a;
  font-size: 12px;
}
</style>